<script setup>
import { reactive } from 'vue';
import ListBox from "../components/ListBox.vue"
// 模拟请求数据的异步操作
function getData(){
  return new Promise((resolve)=>{
    const arr = [];
    for(let i=0;i<10;i++){
      arr.push({
        id: i,
        title:`${i}这是一个${Date.now()}文章的概括信息`
      })
    }
    setTimeout(()=>{
      resolve(arr);
    },1000)
  })
}

// 准备存储列表数据
const data = reactive([]);
// 请求列表数据
getData().then(res=>{
  data.push(...res);
})


// 定义刷新数据功能：接收一个回调函数，异步完成后，需要主动执行这个回调函数，组件内部才能获知，数据刷新完成后的异步状态
function onReload(next){
  getData().then(res=>{
    data.splice(0);
    data.push(...res);
    next();
  })
}
// 定义加载更多数据功能：接收一个回调函数，异步完成后，需要主动执行这个回调函数，组件内部才能获知，数据加载完成后的异步状态
function onLoad(next){
  getData().then(res=>{
    console.log(1)
    data.push(...res);
    next();
  })
}

</script>

<template>
  <div class="about">
    <h1>这是一个列表</h1>
    <ListBox @reload="onReload" @loadmore="onLoad">
      <div class="item" v-for="val in data" :key="val.id">
        {{ val.title }}
      </div>
    </ListBox>
  </div>
</template>

<style>

.listBox .item{
  background: #fff;
  line-height:50px;
}
</style>
